<template>
  <!-- 广告管理 -->
  <div class="app-container">
    <el-button @click="addAdvert()" type="primary" style="margin-bottom: 30px"
      >添加</el-button
    >
    <div class="boxlaw">
      <div slot="header" class="clearfix">
        <ComSelect @EventChange="ChangeFn" :options="options"></ComSelect>
      </div>

      <div class="comform">
        <ComForm
          ref="comForm"
          @EventReset="resetFn"
          @EventOnsubmit="queryFn"
          :list="comForm"
        >
        </ComForm>
      </div>

      <ComTable
        @handleCurrentChange="CurrentPageChangeFn"
        @handleSizeChange="currentPageSizeChangeFn"
        :key="random"
        :list="tableList"
        :modes="tableModes"
        :config="{ border: true, loading }"
        :pagination="{ total: paging.total, pageNum: paging.pageNum }"
        @handleStatusChange="handleStatusChange"
      >
        <el-table-column width="180" #default="{ row }" align="left">
          <template>
            <el-button
              @click="editFn(row)"
              plain
              size="mini"
              type="primary"
              v-hasPermi="['market:coupon:edit']"
              >编辑</el-button
            >
            <el-button
              plain
              size="mini"
              type="primary"
              v-hasPermi="['market:coupon:remove']"
              @click="detailsFn(row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </ComTable>
    </div>
  </div>
</template>

<script>
import ComForm from "@/wss/components/comForm.vue";
import ComSelect from "@/wss/components/comSelect.vue";
import ComTable from "@/wss/components/comTable.vue";
import comForm from "@/wss/components/comForm.vue";
import comDialog from "@/wss/components/comDialog.vue";

import {
  getAdListApi,
  getAdEditStatusApi,
} from "@/wss/api/systemManagement/advert/advert.js";

export default {
  name: "advert",
  dicts: ["sys_normal_disable"],
  components: { ComSelect, ComForm, comForm, ComTable, comDialog },

  data() {
    return {
      initSelectValue: "",

      // 加载
      loading: false,
      paging: { pageNum: 1, pageSize: 10, total: 10 },
      // 切换筛选状态，不更新bug修复
      random: "",
      // 当前筛选的状态
      // 当前筛选的状态
      currentSelect: "",
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "",
            label: "全部",
          },

          {
            value: "4",
            label: "可用",
          },
          {
            value: "5",
            label: "已过期",
          },
        ],
      },

      // 动态生成下拉列表的筛选条件
      dynamicFilter: {},

      // 表格的数据
      tableList: [],
      tableModes: [
        {
          label: "ID",
          type: "index",
        },
        {
          label: "封面",
          mode: "file",
          isImg: true,
        },
        {
          label: "类型",
          mode: "type",
        },
        {
          label: "广告标签",
          mode: "labelList",
          width: "140",
          lists: {
            // success
            // info
            // warning
            // danger
            key_0: "idStr",
            key_1: "name",
            type: "danger",
          },
        },
        {
          width: 180,
          label: "广告名称",
          mode: "name",
        },

        {
          width: 180,
          label: "链接",
          mode: "url",
        },
        {
          width: 100,
          label: "每次点击价格（元）",
          mode: "price",
        },
        {
          label: "预算金额（元）",
          mode: "budget",
        },

        {
          label: "剩余金额（元）",
          mode: "balance",
        },
        {
          label: "点击次数",
          mode: "hitNum",
        },
        {
          label: "投放区域",
          mode: "scope",
        },
        {
          label: "投放位置",
          mode: "position",
        },
        {
          label: "投放开始时间",
          mode: "start",
          width: 200,
        },
        {
          label: "投放结束时间",
          mode: "end",
          width: 200,
        },
        {
          label: "状态",
          mode: "status",
        },
      ],
      comForm: {
        modes: [
          {
            placeholder: "请输入消息编号",
            formType: "input",
            mode: "id",
            label: "消息编号",
            value: "",
          },
          {
            placeholder: "请输入消息标题",
            formType: "input",
            mode: "title",
            label: "消息标题",
            value: "",
          },
        ],
      },
    };
  },

  mounted() {
    this.getAdListApiMet(this.paging);
  },
  methods: {
    // 添加
    addAdvert() {
      // 对象
      this.$router.push({ path: "./AdvertAdd" });
    },

    //快速筛选S
    ChangeFn(value) {
      console.log(value);
    },
    //快速筛选E

    // 修改
    editFn(row) {
      this.$router.push({ path: "./AdvertAdd", query: { id: row.idStr } });
    },
    detailsFn(row) {
      this.$router.push({ path: "./advertdetails", query: { id: row.idStr } });
    },
    // 重设函数
    resetFn() {
      this.initSelectValue = "";
      this.romdom = Math.random();
      this.paging.status = "";
      console.log(this.paging, "重设");
    },
    // 当前页发生改变时候
    CurrentPageChangeFn(pageNUm) {
      this.paging.pageNum = pageNUm;
      this.getAdListApiMet(this.paging);
    },
    // 页容量发生改变时候
    currentPageSizeChangeFn(pageSize) {
      this.paging.pageSize = pageSize;
      this.getAdListApiMet(this.paging);
    },
    // 改变状态status
    handleStatusChange(row) {
      console.log(row);
      let data = {
        id: row.idStr,
        status: row.status,
      };

      this.getAdEditStatusApiMet(data);
    },
    // 筛选数据 查询
    queryFn(arr) {
      // 后端功能还没做出来 *******************8

      arr.forEach((item) => {
        for (const key in item) {
          this.paging[key] = item[key];
        }
      });
      console.log(this.paging);
      this.currentSelect = this.initSelectValue;
      console.log(this.paging, "查询");
      this.paging.pageNum = 1;
      this.getAdListApiMet({ id: 4 });
    },

    // 获取列表数据
    async getAdListApiMet(pagination = null) {
      this.loading = true;
      let result = await getAdListApi(pagination);
      if (result.code == "200") {
        let rows = result.rows.map((item) => {
          /**
           *
           * 剩余金额 balance
           * 预算金额 budget
           * 点击单次价格 price
           * 点击次数  hitNum
           *
           *  剩余金额 = 预算金额 - 点击单次价格 * 点击次数
           *
           */

          item.balance =
            Number(item.budget) - Number(item.price) * Number(item.hitNum);
          return item;
        });
        this.tableList = rows;
        console.log("广告列表：", this.tableList);

        this.paging.total = result.total;
        this.loading = false;
      } else {
        this.$message({
          message: result.msg,
          type: "error",
        });
      }
    },

    // 修改状态接口 -- 广告信息
    async getAdEditStatusApiMet(data) {
      let result = await getAdEditStatusApi(data);
      console.log(result);
    },
  },
};
</script>

<style lang ="scss" scoped>
.comform {
  margin-top: 20px;
}
</style>